<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	request.setAttribute("path", path);//只是为了让el表达式更短一些
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<base href="<%=basePath%>">

<title>课件</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="expires" content="0">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="This is my page">
<link rel="icon" href="favicon.ico">

<!-- Bootstrap core CSS -->
<link href="${path}/res/css/bootstrap(2).min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<%-- <link href="${path}/res/css/bootstrap-theme.min.css" rel="stylesheet"> --%>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="${path}/res/js/html5shiv.min.js"></script>
      <script src="${path}/res/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="container" ng-app="myapp">
	<jsp:include page="/header.jsp"></jsp:include>
	<!-- =======================header=========================== -->

	<br>

	<div id="content" class="container">
		<div class="row">
			<div class="btn-group">
				<button type="button" class="btn btn-primary dropdown-toggle"
					data-toggle="dropdown">
					时间 <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="courseware?pageNum=${pageNum }&order=timeInc">递增</a></li>
					<li class="divider"></li>
					<li><a href="courseware?pageNum=${pageNum }&order=timeDec">递减</a></li>
				</ul>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-primary dropdown-toggle"
					data-toggle="dropdown">
					课程号 <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="courseware?pageNum=${pageNum }&order=teachInc">递增</a></li>
					<li class="divider"></li>
					<li><a href="courseware?pageNum=${pageNum }&order=teachDec">递减</a></li>
				</ul>
			</div>
			<div id="new_file">
				<button id="new_file_btn" type="button"
					class="btn btn-primary collapsed"
					data-target="#upload_courseware_div" data-toggle="collapse">
					<span class="glyphicon glyphicon-plus"></span>&nbsp;新增课件
				</button>
			</div>
			<div id="upload_courseware_div" class="collapse">
				<form id="new_courseware_file"
					class="new_courseware_file form-horizontal"
					action="courseware/upload" method="post" role="form"
					enctype="multipart/form-data" accept-charset="UTF-8">
					<div class="col-sm-offset-2">
						<div class="form-group">
							<label class="col-sm-2 control-label" for="teachID">选择所属课程</label>
							<div class="col-sm-8">
								<select class="form-control" ng-controller='TeachController'
									id="teachID" name="teachID">
									<option ng-repeat='teach in teachs' value="{{teach.id}}">
										{{teach.name}}</option>
								</select>
							</div>
						</div>
				
					<div class="form-group">
						<label for="courseware_file_upload"
							class="col-sm-2  control-label">点击选择上传文件</label>
						<div class="col-sm-8">
							<input id="courseware_file_upload" name="upload" title="点此上传文件"
								type="file" value="点此选择上传文件" required>
						</div>
					</div>

					<div class="form-group">
						<label for="courseware_file_newFileName"
							class="col-sm-2  control-label">新文件名</label>
						<div class="col-sm-8">
							<input class="form-control" id="courseware_file_newFileName"
								maxlength="255" name="newFileName" size="255" type="text">
						</div>
					</div>

					<div class="form-group">
						<label for="courseware_file_description"
							class="col-sm-2  control-label">描述</label>
						<div class="col-sm-8">
							<input class="form-control" id="courseware_file_description"
								maxlength="255" name="description" size="255" type="text">
						</div>
					</div>

					<div class="col-sm-offset-2 col-sm-8">
						<div class="progress">
							<div class="progress-bar progress-bar-striped" aria-valuenow="60"
								aria-valuemin="0" aria-valuemax="100" style="width: 0%">
								<span id="percentValue">0%</span>
							</div>
						</div>
					</div>

					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-8">
							<p id="status" class="form-control-static text-success"
								style="margin-bottom: 20px;"></p>
						</div>
					</div>

					<div class="form-group" style='margin-top:30px;'>
						<input
							class="col-sm-offset-4 col-xs-offset-4 btn btn-success btn-lg"
							id="submit_btn" name="commit" type="submit" value="上传"> <input
							id="reset_btn" class="btn btn-warning" type="reset" value="重置">
					</div>
				</div>
			</form>
		</div>


		<!-- ==========以下是展示课件的部分=============== -->
		

		<div class="row">
			<div class="panel-group" role="tablist">
				<div class="panel panel-default">
					<div class="panel-heading panel-title"
						id="collapseListGroupHeading1">
						<div class="row">
							<div class="col-sm-1 col-xs-1 text-center">#</div>
							<div class="col-sm-4 col-xs-3 text-center">课件名称</div>
							<div class="col-sm-2 col-xs-2 text-center">课程</div>
							<div class="col-sm-1 col-xs-1 text-center">上传者</div>
							<div class="col-sm-1 col-xs-1 text-center">大小</div>
							<div class="col-sm-2 col-xs-2 text-center">上传时间</div>
							<div class="col-sm-1 col-xs-2 text-center">操作</div>
						</div>
					</div>
					<div class="panel-collapse" id="hello"
						ng-controller='CoursewareController' role="tabpanel"
						aria-labelledby="collapseListGroupHeading1" aria-expanded="true">
						<ul class="list-group">
							<li class="list-group-item" ng-repeat="row in coursewares" ng-mouseover="mousein($index)">
								<div class="row" data-toggle="tooltip" data-placement="left"
									title="{{row.type}}">
									<div class="col-sm-1 col-xs-1 text-center" ng-bind="$index"></div>
									<div class="col-sm-4 col-xs-3 text-center" ng-bind="row.name"
										data-toggle="collapse" data-target="#demo{{$index}}"
										style="cursor: pointer;"></div>
									<div class="col-sm-2 col-xs-2 text-center" ng-bind="row.course"></div>
									<div class="col-sm-1 col-xs-1 text-center" ng-bind="row.user"></div>
									<div class="col-sm-1 col-xs-1 text-center" ng-bind="row.size"></div>
									<div class="col-sm-2 col-xs-2 text-center" ng-bind="row.time"></div>
									<div class="col-sm-1 col-xs-2 text-center"
										ng-show='$index == selectedRow'>
										<a id="down" href="javascript:void(0);"
											ng-click="download($index)" data-toggle="tooltip"
											data-placement="left" title="下载"> <span
											class="glyphicon glyphicon-download-alt"></span>
										</a>&nbsp; <a href="javascript:void(0);"
											ng-click="preview($index)" data-toggle="tooltip"
											data-placement="left" title="预览"> <span
											class="glyphicon glyphicon-play-circle"></span>
										</a>&nbsp; <a href="javascript:void(0);" ng-click="remove($index)"
											data-toggle="tooltip" data-placement="left" title="删除"
											ng-show='row.userid == ${username}'> <span
											class="glyphicon glyphicon-remove-circle"></span>
										</a>

									</div>
								</div>
								<div id="demo{{$index}}" class="collapse"
									ng-bind="row.description"></div>
							</li>
						</ul>

					</div>
				</div>
			</div>
		</div>

	</div>
</div>
	<!-- 图片预览框 -->
	<div class="modal fade" id="modal_img" tabindex="-1" role="dialog"
		aria-labelledby="modal_img_label" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="modal_img_label">图片预览</h4>
				</div>
				<div class="modal-body">
					<img id="preview_img" alt="" src="" width="100%" height="100%">
				</div>
				<div class="modal-footer">
					<a id="preview_img_download_btn" class="btn btn-primary" href="#">下载原图</a>
				</div>
			</div>
		</div>
	</div>

	<!-- 文本预览框 -->
	<div class="modal fade" id="modal_text" tabindex="-1" role="dialog"
		aria-labelledby="modal_img_label" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="modal_text_label">文本预览</h4>
				</div>
				<div class="modal-body">
					<div id="preview_text"></div>
				</div>
				<div class="modal-footer">
					<a id="preview_text_download_btn" class="btn btn-primary" href="#">下载该课件</a>
				</div>
			</div>
		</div>
	</div>
	<!-- ppt预览框 -->
	<div class="modal fade" id="modal_ppt" tabindex="-1" role="dialog"
		aria-labelledby="modal_ppt_label" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="modal_ppt_label">ppt预览</h4>
				</div>
				<div class="modal-body">
					<div id="preview_ppt" ng-controller='pptController'>
						<div id="preview_ppt_loading"></div>
						<div class="carousel slide" data-interval="false" id="carousel-945355">
							<ol class="carousel-indicators">
								<li data-slide-to="{{$index}}"  ng-class='{active: $index == 0}' data-target="#carousel-945355" ng-repeat="row in ppts"></li>
							</ol>
							<div class="carousel-inner"  role="listbox">
								<div class="item" ng-class='{active: $index == 0}' ng-repeat="row in ppts" ng-class="">
									<img alt="" src="{{row.img}}" />
									<div class="carousel-caption">
										<h4>{{row.title}}</h4>
										<p>{{row.des}}</p>
									</div>
								</div>
								
							</div>
							<a class="left carousel-control" href="#carousel-945355"
								data-slide="prev"><span
								class="glyphicon glyphicon-chevron-left"></span></a> <a
								class="right carousel-control" href="#carousel-945355"
								data-slide="next"><span
								class="glyphicon glyphicon-chevron-right"></span></a>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<a id="preview_ppt_download_btn" class="btn btn-primary" href="#">下载该课件</a>
				</div>
			</div>

		</div>
	</div>



	<nav>
		<ul class="pagination">
			<li><a href="courseware?pageNum=1">&laquo;</a></li>
			<%
				int i = 1;
				Integer cnt = (Integer) request.getAttribute("pageCount");
				for (; i <= cnt; i++) {
					if ((Integer) request.getAttribute("pageNum") == i) {
			%>
			<li class="active"><a href="courseware?pageNum=<%=i%>"><%=i%></a></li>
			<%
				} else {
			%>
			<li><a href="courseware?pageNum=<%=i%>"><%=i%></a></li>
			<%
				}
				}
			%>
			<li><a href="courseware?pageNum=<%=cnt%>">&raquo;</a></li>
		</ul>
	</nav>

	<!-- ========================footer========================== -->
	<jsp:include page="/footer.jsp"></jsp:include>
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="${path}/res/js/jquery.min.js"></script>
	<script src="${path}/res/js/bootstrap.min.js"></script>

	<script src="${path}/res/js/jquery.fileupload.js"></script>
	<script src="${path}/res/js/jquery.iframe-transport.js"></script>
	<script src="${path}/res/js/jquery.ui.widget.js"></script>
	<script src="${path}/res/js/jquery.form.js"></script>
	<script src="${path}/res/js/angular.min.js"></script>
	<script src="${path}/res/js/courseware.js"></script>
	<script type="text/javascript">
		var teachlist = '${teachJson}';
		var coursewarelist = '${coursewareJson}';
	</script>

</body>
</html>
